<template>
  <div class="home_container">
   <Row>
     <Col span="12">
      <Card>
        
        <div class="brand_sales_overview">
           <Row>
            <Col span="6">
              <h3>品牌销售总览</h3>
            </Col>
            
            <Col span="6">  
              <Select v-model="brand_channel_id" @on-change="getbrandList" style="width:8vw;" size="small">
                <Option value="0">全部</Option>
                <Option v-for="item in channels" :value="item.id" :key="item.value">{{ item.name }}</Option>
              </Select>         
            </Col>
            <Col span="6">
              <Select v-model="brand_date_type" @on-change="getbrandList" style="width:8vw;" size="small">
                <Option v-for="item in daterange" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6">
              <Select v-model="brand_member_type" @on-change="getbrandList" placeholder="请选择" style="width:8vw;" size="small">
                <Option value="0">全部</Option>
                <Option value="1">会员</Option>
                <Option value="2">微信粉丝</Option>
                <Option value="3">顾客</Option>
                <Option value="4">潜客</Option>
              </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
                <div id="BrandSales" style="width:40vw;height:40vh;margin-left:-1vw;"></div>
             </Col>
           </Row>
        </div>
      </Card>
     </Col>
     <Col span="12">
      <Card style="margin-left:1vw;">
        <div class="brand_sales_overview">
           <Row>
            <Col span="6">
              <h3>客户复购率</h3>
            </Col>
            <Col span="6">
              <Select v-model="repurchase_channel_id" @on-change="getrepurchase" style="width:8vw;" size="small">
                <Option value="105">全部</Option>
                <Option v-for="item in channels" :value="item.id" :key="item.value">{{ item.name }}</Option>
              </Select>  
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div id="customerepurchase" style="width:40vw;height:40vh;margin-left:-1vw;"></div>
             </Col>
           </Row>
        </div>
      </Card>
     </Col>
   </Row>
   <Row>
    <Col span="12">
      <Card style="margin-top:2vh;">
        <div class="marketingkpi_container" >
           <Row>
            <Col span="5">
              <h3>营销效果KPI</h3>
            </Col>
            <Col span="6" push="1">
              <Select v-model="sale_date_type" @on-change="getsaleStatement" style="width:8vw;" size="small">
                <Option v-for="item in daterange" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6" push="1">
              <Select v-model="sale_member_type" @on-change="getsaleStatement" placeholder="请选择" style="width:8vw;" size="small">
                <Option value="0">全部</Option>
                <Option value="1">会员</Option>
                <Option value="2">微信粉丝</Option>
                <Option value="3">顾客</Option>
                <Option value="4">潜客</Option>
              </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div class="marketingkpi" style="width:40vw;height:40vh;margin-left:-1vw;">
                <ul style="padding-left:2vw;" v-if="saleStatements">
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">营销用户数</p>
                    <div><span :style="marketingkpinum"> {{ saleStatements.totalTargetCount }} </span><span>人</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">响应客户数</p>
                    <div><span :style="marketingkpinum"> {{ saleStatements.totalResponseCount }}</span><span>人</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">成功营销金额</p>
                    <div><span :style="marketingkpinum"> <span>¥</span>{{ saleStatements.totalPayment | formatnum}} </span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">响应率</p>
                    <div><span :style="marketingkpinum"> {{ saleStatements.responseRate }} </span><span>%</span></div>
                  </li>
                  <li :style="martketinglistyle">
                    <p :style="marketingkpititle">ROI</p>
                    <div><span :style="marketingkpinum"> {{ saleStatements.roiRate }} </span><span>%</span></div>
                  </li>
                  <div style="clear:both;"></div>
                </ul>
              </div>
             </Col>
           </Row>
        </div>
      </Card>
    </Col>
    <Col span="12">
      <Card style="margin-left:1vw;margin-top:2vh;">
        <div class="brand_sales_overview">
           <Row>
            <Col span="6">
              <h3>TOP5营销活动</h3>
            </Col>
            <Col span="6">
              <Select v-model="activity_date_type" @on-change="getsaleActivity" style="width:8vw;" size="small">
                <Option v-for="item in daterange" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col span="6" push="1">
                <Select v-model="activity_member_type" @on-change="getsaleActivity" placeholder="请选择" style="width:8vw;" size="small">
                  <Option value="0">全部</Option>
                  <Option value="1">会员</Option>
                  <Option value="2">微信粉丝</Option>
                  <Option value="3">顾客</Option>
                  <Option value="4">潜客</Option>
                </Select>
            </Col>
           </Row>
           <Row>
             <Col span="24">
              <div id="activity" style="width:38vw;height:50vh;margin-left:-1vw;">
                <Table border :columns="columns" :data="saleActivityList" style="top:10vh;width:100%"></Table>
              </div>
             </Col>
           </Row>
        </div>
      </Card>
    </Col>
   </Row>
  </div>
</template>
<script>
import { brandList,repurchase,saleStatement,saleActivity ,fetchChannelList} from "@/api/report";
import echarts from "echarts";
export default {
  name: 'index',
  data () {
   return {
      brand_channel_id:'0',
      brand_member_type:'0',
      brand_date_type:'1',
      repurchase_channel_id:'105',
      sale_member_type:'0',
      sale_date_type:'1',
      activity_member_type:'0',
      activity_date_type:'1',
      brandTimeList:[],
      brandReportList:[],
      brandNameList:[],

      // 品牌
      salesvolume:[], //销售额
      purchases:[], //购买人数
      customerprice:[], //客单价
      unitprice:[],
     
      repurchaseTimeList:[],  // X轴数据
      repurchaseNameList:[],  // 复购 legend
      repurchasesnum:[], // 复购人数
      repurchasesrate:[], // 复购率
      repurchasespro:[], // 复购占比

      repurchaseReportList:[],
      saleStatements:{},
      saleActivityList:[],
      channels:[],    
      // 营销效果
      marketinglist:[],
      // Top5营销活动
      daterange:[
        {
          value: '1',
          label: '近7日'
        },
        {
          value: '2',
          label: '近15日'
        },
        {
          value: '3',
          label: '近30日'
        }
      ],
      //top表格
      columns: [
          {
              title: '活动ID',
              key: 'campaignId',
              width: 80,
          },
          {
              title: '活动名称',
              key: 'activityName',
              width: 100,
          },
          {
              title: '营销客人数',
              key: 'totalTargetCount',
              width: 100,
          },
          {
              title: '营销成功人次',
              key: 'totalResponseCount',
              width: 110,
          },
          {
              title: '成功率',
              key: 'responseRate',
              width: 100,
          },
          {
              title: '营销成本',
              key: 'totalCost',
              width: 100,
          },
          {
              title: '营销收益',
              key: 'totalPayment',
              width: 100,
          },
          {
              title: 'ROI',
              key: 'roiRate',
              width: 100,
          }
      ],
    }
  },
  computed: {
    martketinglistyle() {
      return {
        dispaly:'inline-block',
        width:'10vw',
        height:'20vh',
        float:'left',
        margin:'1vw',
        overflow: 'hidden',
        whiteSpace:'nowrap',
        textOverflow:'ellipsis',
      }
    },
    marketingkpititle() {
      return {
        height:'15vh',
        fontSize: '1rem',
        lineHeight:'15vh',
      }
    },
    marketingkpinum() {
      return {
        height:'5vh',
        lineHeight:'5vh',
        fontSize: '2rem',
      }
    },
    unitstyle() {
      return {
        fontSize:'14px',
        marginLeft:'5px',
      }
    }
  },
  created() {
    this.channelList();
  },
  methods: {
    // 折线图
    drawBrandSales(){    // 品牌销售总览
      echarts.dispose(document.getElementById("BrandSales"));
      this.BrandSales = echarts.init(document.getElementById("BrandSales"));
      this.BrandSales.setOption({
        animationDelay:function(idx){
            return idx * 150;
        },
        color:['#14CAF4','#00D7B0','#F59A76','#5684FF','#EDF760','#FC7CA1'],
        tooltip: {
         trigger: 'axis'
        },
        legend: {
          type:'scroll',
          orient: 'vertical',
          pageIconSize: 10,
          right:'5%',
          top: 20,
          bottom: 20,
          data:this.brandNameList,
          
        },
        grid: {
          width:'80%',
          height:'80%',
          top:40,
          left:'1%',
          right:'5%',
          borderWidth : 1,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.brandTimeList,
          axisTick:{
            show:true,
            inside:true
          },
          axisLabel:{
            rotate:30,
            color:'#cbcbcb'
          },
        },
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                formatter: function(value){
                  return value/1000 + 'K';
              },
            },
            },
            {
                type: 'value',
                min: 0,
            }
        ],
        series: [
            {
              name:'销售额',
              type:'bar',
              stack: '堆叠',
              barWidth:'20px',
              data: this.salesvolume,
           },
           { 
              name:'购买人数',
              type:'bar',
              stack: '堆叠',
              barWidth:'20px',
              data: this.purchases,
           },
           {
              name:'客单价',
              type:'line',
              yAxisIndex: 1,
              data: this.customerprice,
           },
           {
              name:'货单价',
              type:'line',
              yAxisIndex: 1,
              data: this.unitprice,
           }
        ]
      });
    },
    drowcustomerepurchase() {           // 客户复购率
      echarts.dispose(document.getElementById("customerepurchase"));
      this.customerepurchase = echarts.init(document.getElementById("customerepurchase"));
      this.customerepurchase.setOption({
         animationDelay:function(idx){
            return idx * 150;
        },
        // #009966 复购占比  #fed040 复购率  #6b8dff 复购人数
        color:['#6b8dff','#fed040','#009966'],
        grid:{
          width:'80%',
          height:'80%',
          top:40,
          left:'5%',
          right:'5%',
          containLabel: true
        },
        tooltip: {
            trigger: 'axis'
         },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right:20,
          top: 20,
          bottom: 20,
          data:this.repurchaseNameList
        },
        axisPointer:{
         
        },
        xAxis: [
          {
            type: 'category',
            data: this.repurchaseTimeList,
            axisTick:{
              show:true,
              inside:true
            },
            axisLabel:{
              rotate:30,
              color:'#cbcbcb'
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel:{
                formatter: function(value){
                  return value/1000 + 'K';
              },
            },
          },
          {
            type: 'value',
            axisLabel:{
                formatter:'{value} %'
            }
          }
        ],
        series: [
            {
              name:'复购人数',
              type:'bar',
              stack: '堆叠',
              barWidth:'30px',
              data: this.repurchasesnum,
           },
           { 
              name:'复购率',
              type:'line',
              yAxisIndex:1,
              stack: '堆叠',
              data: this.repurchasesrate,
           },
           {
              name:'复购占比',
              type:'line',
              yAxisIndex:1,
              data: this.repurchasespro,
           },
        ]
      });
    },
    channelList() {
      fetchChannelList().then(res => {
        if (res.data.code == 200) {
            this.channels = res.data.data;
        } else {
          this.$Message.error("操作失败");
        }
      });
    },
    drawCharts(){
      this.drawBrandSales();
      this.drowcustomerepurchase();
    },
    getbrandList() {
      this.TableLoading = true;
      this.load = true;
      var reqParams = {
        date_type: this.brand_date_type,
        member_type: this.brand_member_type,
        channel_id: this.brand_channel_id
      };
      brandList(reqParams).then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.brandReportList = res.data.result.reportLists;
            this.brandNameList = res.data.result.nameList;
            this.brandTimeList = res.data.result.timeList;
            for(let i = 0; i < res.data.result.reportLists.length; i++){
              this.salesvolume = res.data.result.reportLists[0].data;
              this.purchases = res.data.result.reportLists[1].data;
              this.customerprice = res.data.result.reportLists[2].data;
              this.unitprice = res.data.result.reportLists[3].data;
            }
            this.drawBrandSales();
          }
        })
        .catch(error => {
          // this.$Message.error(error);
        });
    },
    getrepurchase() {
      this.TableLoading = true;
      this.load = true;
      var reqParams = {
        channel_id: this.repurchase_channel_id
      };
      repurchase(reqParams).then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.repurchaseTimeList = res.data.result.timeList;
            this.repurchaseNameList = res.data.result.nameList;
            this.drowcustomerepurchase();
            for(let i = 0 ; i < res.data.result.reportLists.length; i++){
              this.repurchasesnum = res.data.result.reportLists[0].data;
              this.repurchasesrate = res.data.result.reportLists[1].data;
              this.repurchasespro = res.data.result.reportLists[2].data;
            }
          }
        })
        .catch(error => {
          // this.$Message.error(error);
        });
    },
    getsaleStatement() {
      var reqParams = {
        member_type: this.sale_member_type,
        date_type: this.sale_date_type,
      };
      saleStatement(reqParams).then(res => {
          if (res.data.code== 200) {
            this.saleStatements = res.data.data;
          }
        })
        .catch(error => {
          // this.$Message.error(error);
        });
    },



    getsaleActivity() {
      var reqParams = {
        member_type: this.activity_member_type,
        date_type: this.activity_date_type,
      };
      saleActivity(reqParams).then(res => {
          if (res.data.code== 200) {
            this.saleActivityList = res.data.result.formList;
          }
        })
        .catch(error => {
          // this.$Message.error(error);
        });
    },
  },
    mounted () {
    this.getbrandList();
    this.getrepurchase();
    this.getsaleStatement();
    this.getsaleActivity();
  }
  
}
</script>
<style lang="scss" scoped>
@import "../styles/common.scss";
.home_container{
  @include container_global;
  background: #F3F7FF;
  .brand_sales_overview{

  }
  .marketingkpi{
    margin-top: 2vh;
  }
}
</style>
